<!--
 * @Description: 唯品会项目楼梯式定位导航
 * @Author: Sun
 * @Date: 2019-07-13 08:17:28
 * @LastEditors: Sun
 * @LastEditTime: 2019-07-13 12:12:21
 -->
<!doctype html id="mnb">
<html>

<head>
	<!--声明当前页面编码格式为国际编码（utf-8）还有一种中文编码（gbk/gb2312）-->
	<meta charset="UTF-8">
	<!--网页三要素-->
	<meta name="Keywords" content="关键词,关键词">
	<meta name="Description" content="描述">
	<title>唯品会项目楼梯式定位导航</title>
	<!--css 层叠样式表  衣服，化妆品 修饰自己  修饰body-->
	<style>
		* {
			margin: 0;
			padding: 0;
		}

		.slide-nav {
			/*以 . 开头 就是类样式 class命名*/
			width: 65px;
			/*宽*/
			height: 455px;
			/*高*/
			background: #fff;
			/*背景颜色*/
			position: fixed;
			/*固定定位 把元素固定到浏览器窗口某个位置*/
			left: 30px;
			top: 300px;
			padding: 5px;
			border-radius: 5px;
			/*小圆角*/
			border: 1px solid #C5C5C5;
			/*边框线*/
			display: none;
		}

		.slide-nav ul li {
			list-style: none;
			/*去掉默认的列表样式*/
			width: 65px;
			height: 35px;
			font-size: 12px;
			/*文本大小*/
			color: #666;
			/*文字颜色*/
			line-height: 35px;
			/*行高 把文字放在行高中间*/
			border-radius: 5px;
			/*小圆角*/
			cursor: pointer;
			/*手指形状*/
		}

		@font-face {
			font-family: 'iconfont';
			/* src: url('../../.ioc/iconfont.eot'); */
			src: url('img/wei/ioc/iconfont.eot');
			/* IE9*/
			src: url('img/wei/ioc/iconfont.eot?#iefix') format('embedded-opentype'),
				/* IE6-IE8 */
				url('img/wei/ioc/iconfont.woff') format('woff'),
				/* chrome、firefox */
				url('img/wei/ioc/iconfont.ttf') format('truetype'),
				/* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
				url('img/wei/ioc/iconfont.svg#iconfont') format('svg');
			/* iOS 4.1- */
		}

		.iconfont {
			font-family: "iconfont" !important;
			font-size: 16px;
			font-style: normal;
			-webkit-font-smoothing: antialiased;
			-webkit-text-stroke-width: 0.2px;
			-moz-osx-font-smoothing: grayscale;
			margin: 0 5px;
			/*上下 左右*/
		}

		.slide-nav ul li:hover {
			color: #ff00ff;
		}

		.slide-nav ul li.active {
			background: #ff00ff;
			color: #fff;
		}

		/*头部样式*/
		.header-box {
			width: 100%;
			height: 80px;
			background: #321762;
		}

		.header-box .header-con {
			width: 1000px;
			height: 80px;
			margin: 0 auto;
			/*上下 左右居中*/
		}

		/*logo 样式*/
		.logo {
			width: 1000px;
			height: 130px;
			margin: 0 auto;
		}

		/*导航样式*/
		.nav-box {
			width: 100%;
			height: 40px;
			background: #f10180;
		}

		.nav-box .nav {
			width: 1000px;
			height: 40px;
			margin: 0 auto;
		}

		/*主体样式*/
		.main {
			width: 1000px;
			margin: 0 auto;
		}

		.main .con {
			width: 1000px;
		}

		.footer {
			width: 1000px;
			height: 470px;
		}
	</style>
</head>

<body>
	<!-- 
		命名：区分个体与个体  添加样式	 js控制元素对象
		id=""  身份证 唯一性   #
		class="" 同名同姓 多个
	-->
	<!--slide-nav star-->
	<div class="slide-nav" id="slide-nav">
		<ul id="slide-nav-ul">
			<li class="active"><i class="iconfont">&#xe620;</i>精选</li>
			<li><i class="iconfont">&#xe62b;</i>女装</li>
			<li><i class="iconfont">&#xe62e;</i>鞋包</li>
			<li><i class="iconfont">&#xe62a;</i>男士</li>
			<li><i class="iconfont">&#xe62e;</i>运动</li>
			<li><i class="iconfont">&#xe607;</i>饰品</li>
			<li><i class="iconfont">&#xe669;</i>美妆</li>
			<li><i class="iconfont">&#xe60d;</i>母婴</li>
			<li><i class="iconfont">&#xe675;</i>居家</li>
			<li><i class="iconfont">&#xe625;</i>国际</li>
			<li><i class="iconfont">&#xe684;</i>生活</li>
			<li><i class="iconfont">&#xe62f;</i>预告</li>
		</ul>
	</div>
	<!--slide-nav end-->

	<!--头部 star-->
	<div class="header-box">
		<div class="header-con"><img src="img/wei/header.png" /></div>
	</div>
	<!--头部 end-->

	<!--logo star-->
	<div class="logo"><img src="img/wei/soso.png" /></div>
	<!--logo end-->
	<!--导航 star-->
	<div class="nav-box">
		<div class="nav"><img src="img/wei/nav.png" /></div>
	</div>
	<!--导航 end-->

	<!--主体 star-->
	<div class="main" id="main">
		<div class="con"><img src="img/wei/main_pic1.png" /></div>
		<div class="con"><img src="img/wei/main_pic2.png" /></div>
		<div class="con"><img src="img/wei/main_pic3.png" /></div>
		<div class="con"><img src="img/wei/main_pic4.png" /></div>
		<div class="con"><img src="img/wei/main_pic5.png" /></div>
		<div class="con"><img src="img/wei/main_pic6.png" /></div>
		<div class="con"><img src="img/wei/main_pic7.png" /></div>
		<div class="con"><img src="img/wei/main_pic8.png" /></div>
		<div class="con"><img src="img/wei/main_pic9.png" /></div>
		<div class="con"><img src="img/wei/main_pic10.png" /></div>
		<div class="con"><img src="img/wei/main_pic11.png" /></div>
		<div class="con"><img src="img/wei/main_pic12.png" /></div>
	</div>
	<!--主体 end-->
	<!--footer star-->
	<div class="footer"><img src="img/wei/footer.png" /></div>
	<!--footer end-->
	<!-- <script src="js/jquery.js"></script> -->
	<script>
		window.onload = function () {
			var k = true;
			var slidenav = document.getElementById("slide-nav")
			var mnb = document.getElementById("mnb")
			var mains = document.getElementById("main")
			var con = mains.getElementsByClassName("con")
			var slidenavul = document.getElementById("slide-nav-ul")
			var slidenali = slidenavul.getElementsByTagName("li")
			window.onscroll = function () {
				if (!k) {
					return
				}
				let _top = document.documentElement.scrollTop || document.body.scrollTop;
				if (_top > 300) {
					slidenav.style.display = 'block';
				} else {
					slidenav.style.display = "none";
				}
				for (let inx = 0; inx < slidenali.length; inx++) {
					const elt = slidenali[inx];
					slidenali[inx].className = ""
				}
				for (let index = 0; index < con.length; index++) {
					const element = con[index];
					var _height = element.offsetTop + 200
					if (_top < _height) { //优先原则
						slidenali[index].className = "active"
						return false; //跳出遍历
					}
				}
			}

			//点击跳转
			for (let ix = 0; ix < slidenali.length; ix++) {
				const et = slidenali[ix];
				et.className = ""
				et.onclick = function () {
					k = false;
					et.className = "active"
					document.documentElement.scrollTop = document.body.scrollTop = con[ix].offsetTop
					k = true;
				}
			}

		}
	</script>
</body>

</html>